<template>
  <div class="agent__header flex-center mb-12">
    <svg-icon @click="toback" icon-class="icon-back" class="fs-20 agent-back"></svg-icon>
    <h2 class="fs-16 agent_title">AI应用中心</h2>
    <el-input
      v-model="searchInput"
      size="small"
      class="search__input ml-a fs-12"
      :clearable="true"
      placeholder="输入你想要找的智能体"
      @input="handleSearchInput">
      <template slot="prefix">
        <svg-icon icon-class="search-btn1" class="fs-16"></svg-icon>
      </template>
    </el-input>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { debounce } from '@/utils'
// import { getHistory } from '@/api/chat'
export default {
  name: 'HomeChat',
  inject: ['setHistoryMessage'], // 接收一个方法
  components: {},
  props: {
    searchText: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      searchInput: ''
    }
  },
  computed: {
    ...mapGetters(['chatStore'])
  },
  created () {
    this.handleSearchInput = debounce((errMsg) => {
      this.$emit('search', this.searchInput)
    }, 300, false)
  },
  mounted () {
    if (this.searchText) this.searchInput = this.searchText
  },
  methods: {
    async toback () {
      // if (this.chatStore.prevConversionId) {
      //   const { data } = await getHistory({ page: 1, page_size: 15 })
      //   const list = data?.conversations || []
      //   if (list.length > 0) {
      //     const param = list.find((v) => v.conversation_id === this.chatStore.prevConversionId)
      //     if (param) this.setHistoryMessage(param)
      //   }
      // }
      // this.$store.dispatch('chat/setChatStore', { prevConversionId: '' })
      this.$store.dispatch('agent/setAgentShow', false)
    }
  }
}

</script>

<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  /deep/ .el-input__prefix {
    display: flex;
    align-items: center;
    left: 0;
    .svg-icon {
      margin-left: 16px;
    }
  }
  /deep/ .el-input__inner {
    border-radius: 6px;
    padding-left: 42px;
    border: none;
    color: #fff;
    &:hover, &:focus {
      background: rgba(255, 255, 255, 0.2);
      border: none;
    }
  }
}
.agent__header {
  padding: 16px 4px 12px;
  gap: 10px;
  color: rgba($color: #fff, $alpha: 0.7);
  .agent_title {
    color: #FFF;
  }
  .agent-back {
    cursor: pointer;
    &:hover {
      color: #fff;
    }
  }
}
.search__input {
  width: 197px;
  color: #fff;
  --el-font-size-base: 12px;
  line-height: 1;
}
</style>
